<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>我的朋友圈</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../css/app.css">
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <!--渲染页面数据-->
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <!-- 如果到底了就提示用户到底了的消息插件-->
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script>
        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            $(".myMessage").renderValues(user);
            // 当前页变量  / 手机是滑动查询下一页的
            var currentPage = 1;
            // 总页数
            var pages;
            //存储游记的数组
            var travelArr = []; // js中数组是边长的,很方便做数组拼接
            function query() {
                // 获取该攻略评论下的子评论
                $.get("/userDynamics/" + user.id, function (data) {

                    var json = {
                        list: data
                    }
                    console.log(json.conent);
                    $(".list").renderValues(json);

                });
                // 每次查询加一页
                currentPage = currentPage + 1;
            }

            // 调用方法 默认查询第一页
            query();
            //给window绑定事件
            $(window).scroll(function () {
                if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                    // console.log("进行分页....");
                    // 判断是否到最后一页 / 如果大于最后一页就不发送请求了
                    if (currentPage <= pages) {
                        query();
                    } else {
                        // 已经到最后了就提示用户已经到底了(引入插件)
                        $(document).dialog({
                            type: "notice",  // 好像时设置样式
                            content: "<span class='info-text'>没有更多了!</span>", // 显示的文字
                            autoClose: 1000 // 多久后关闭
                        })
                    }
                }
            })

            $("#comment").click(function () {
                console.log("kjkdjfakd");
            });

        })
    </script>

</head>
<body>
<div class="myMessage">
    <div style="margin:0 auto;display:none;">
        <img class="data-avt" src="../images/0.jpg">
    </div>
    <header>
        <img id="bg" render-src="coverImgUrl">
        <p id="user-name" class="data-name" render-html="nickName"></p>
        <img id="avt" class="data-avt" render-src="headImgUrl">
    </header>
</div>
<div id="main">
    <div id="list">
        <ul>
            <li>
                <div class="po-avt-wrap">
                    <img class="po-avt data-avt" src="../images/c4.jpg">
                </div>
                <div class="po-cmt">
                    <div class="po-hd">
                        <p class="po-name"><span class="data-name">呵呵哥</span></p>
                        <div class="post">
                            <p>大家好，听说国内冻成狗🐶？我这边还挺热～</p>
                            <p>
                                <img class="list-img" src="../images/jt1.jpg" style="height: 80px;">
                                <img class="list-img" src="../images/yt3.jpg" style="height: 80px;">
                                <img class="list-img data-avt" src="../images/0.jpg" style="height: 80px;">
                            </p>
                        </div>
                        <p class="time">刚刚</p><img class="c-icon" src="../images/c.png">
                    </div>
                    <div class="r"></div>
                    <div class="cmt-wrap">
                        <div class="like"><img src="../images/l.png"></div>
                        <div class="cmt-list">
                            <p><span>喵喵:</span>带我～</p>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="po-avt-wrap">
                    <img class="po-avt" src="/img/user/head.jpg">
                </div>
                <div class="po-cmt">
                    <div class="po-hd">
                        <p class="po-name">
                            扣叮狼
                        </p>
                        <p class="post">
                            500期大神班开班了～大家快点来报名吧
                            <!--<img src="../images/c1.jpg">-->
                        </p>
                        <p class="time">
                            50分钟前
                        </p>
                        <img class="c-icon" src="../images/c.png">
                        <div class="r">
                        </div>
                        <div class="cmt-wrap">
                            <div class="like">
                                <img src="../images/l.png">

                            </div>
                            <div class="cmt-list">

                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="po-avt-wrap">
                    <img class="po-avt" src="../images/asd888.jpg">
                </div>
                <div class="po-cmt">
                    <div class="po-hd">
                        <p class="po-name">
                            追梦人
                        </p>
                        <p class="post">
                            我的生日趴，你为什么不来
                            <img class="data-avt" src="../images/0.jpg">
                        </p>
                        <p class="time">
                            1天前
                        </p>
                        <img class="c-icon" src="../images/c.png">
                    </div>
                    <div class="r">
                    </div>
                    <div class="cmt-wrap">
                        <div class="like">
                            <img src="../images/l.png">
                            <b class="data-name"></b>
                        </div>
                        <div class="cmt-list">
                            <p>
                                <span class="data-name">呵呵哥</span>
                                <span>
                                            ：
                                        </span>
                                最近忙。
                            </p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<script>
</script>


<script>
    function gotoplay(scene) {
        var gourl = "/act/pengYouQuan/my.php?sv=" + scene;
        location.href = gourl;
    }

    function safetostring(str) {
        return String(str).replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#39;/g, "'");
    }

    //$("#list").html($("#scene").html());

    setTimeout(function () {
        // $(".data-name").text(safetostring(nickname));
        //$(".data-avt").attr("src", headimgurl);
        var cw = $('.list-img').width();
        $('.list-img').css({'height': cw + 'px'});
    }, 0);

    $(window).resize(function () {
        var cw = $('.list-img').width();
        $('.list-img').css({'height': cw + 'px'});
    });


    $(document.body).show();


    function hideActionSheet(weuiActionsheet, mask) {
        weuiActionsheet.removeClass('weui_actionsheet_toggle');
        mask.removeClass('weui_fade_toggle');
        weuiActionsheet.on('transitionend', function () {
            mask.hide();
        }).on('webkitTransitionEnd', function () {
            mask.hide();
        })
    }

    function showActionSheet() {
        var mask = $('#mask');
        var weuiActionsheet = $('#weui_actionsheet');
        weuiActionsheet.addClass('weui_actionsheet_toggle');
        mask.show().addClass('weui_fade_toggle').click(function () {
            hideActionSheet(weuiActionsheet, mask);
        });
        $('#actionsheet_cancel').click(function () {
            hideActionSheet(weuiActionsheet, mask);
        });
        weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');
    }

    $('#list').not(".noplayimg").on('click', function () {
        showActionSheet();
    });
    $('img').not(".noplayimg").on('click', function (e) {
        showActionSheet();
    });
    $('.play_pyq').on('click', function () {
        var scene = $(this).data("scene");
        gotoplay(scene);
    });
</script>


</body>
</html>